<script setup lang="ts">
import { RouterView } from "vue-router";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { onMounted, ref } from "vue";
import { useCounterStore } from "@/stores/counter.ts";

dayjs.locale("zh-CN");
const locale = ref(zhCN);
// 动态设置网页icon

onMounted(() => {
  initializeAppMetadata();
});

async function initializeAppMetadata(): Promise<void> {
  try {
    const counterStore = useCounterStore();
    await counterStore.getSysConfig();
    updateAppMetadata(
      counterStore.config.icon,
      counterStore.config.websiteName,
    );
  } catch (error) {
    console.error("Failed to initialize app metadata:", error);
  }
}

function updateAppMetadata(faviconUrl: string, title: string): void {
  const link = document.querySelector(
    'link[rel="icon"]',
  ) as HTMLLinkElement | null;
  if (link?.href) {
    link.href = faviconUrl;
  }
  document.title = title;
}
</script>

<template>
  <a-config-provider :locale="locale">
    <div class="app">
      <RouterView />
    </div>
  </a-config-provider>
</template>

<style scoped>
.app {
  height: 100%;
  width: 100%;
  background: url("@/assets/image/1163420.jpg") no-repeat fixed;
  background-size: cover;
}
</style>
